<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--导入exlce样式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
    <!-- 引入Bootstrap默认样式 -->
    <link rel="stylesheet" type="text/css"
          href="css/bootstrap.min.css"/>
    <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript"
            src="js/jquery.serializejson.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/carts.css">
    <style type="text/css">
        .red {
            background-color: lightgreen;
        }

        .green {
            background-color: darksalmon;
        }
    </style>
</head>
<body style="margin: 0px;background-repeat:no-repeat;
            background-attachment: fixed;
            background-origin: border-box;
            background-size:cover;
		">
<div id="admission" style="margin-top:-12px;">
    <ol class="breadcrumb" ></ol>
    <div>
        <form>
            <span class="top" >材料阶段:</span>
            <input  v-model="example.materialId" class="content top" type="text"/>
            <input  placeholder="请输入项目名称" class="content top" type="text"/>
           <input v-on:click="select1" class="top" type="button" value="查询"/>
        </form>
        <span style="margin: 50px 40%;font-size: 30px" >材料清单表</span>
    </div>
    <div class="table-responsive table2excel" data-tableName="Test Table 1">
        <table class="table table-hover table-striped table-bordered table-hover">
            <thead>
            <tr>
                <td class="success">编号</td>
                <td class="success">材料id</td>
                <td class="success">材料名称</td>
                <td class="success">材料型号</td>
                <td class="success">材料价格</td>
                <td class="success">材料数量</td>
                <td class="success">总价</td>
                <td class="success">供应商</td>
                <td class="success">项目ID</td>
                <td class="success">阶段</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(li,index) in list" >
                <td v-text="index+1"></td>
                <td v-text="li.material_id"></td>
                <td v-text="li.material_name"></td>
                <td v-text="li.material_model"></td>
                <td v-text="li.material_price"></td>
                <td v-text="li.material_list_num"></td>
                <td><span v-text="li.material_list_total"></span>$</td>
                <td v-text="li.material_supplier"></td>
                <td v-text="li.project_id"></td>
                <td v-text="li.material_operation_num"></td>
            </tr>
            </tbody>
        </table>
        <button id="btn" class="btn btn-primary">将文件导出到excel中</button>
    </div>
    </div>
</div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#admission',
            data: {
                list:[],
                /*通过阶段id查找阶段*/
                example: {
                    materialId:0,
                },
            },
            methods: {
                /*通过阶段id查找阶段*/
                select1: function () {
                    var _this = this;
                    $.ajax({
                        type: "get",
                        url: "/findBymAndp",
                        data: _this.example,
                        dataType: 'json',
                        success: function (data) {
                            _this.list =data.data;
                            console.log(data)
                            console.log(data.data);
                        },
                        error: function (data) {
                            alert(data.message);
                        },
                    });
                },
            }
        });
    </script>
<!--Excel导出文件-->
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="dist/jquery.table2excel.js"></script>
<script>
    $(function() {
        $("#btn").click(function(){
            $(".table2excel").table2excel({
                exclude: ".noExl",
                name: "Excel Document Name",
                filename: "壹装修材料清单",
                exclude_img: true,
                exclude_links: true,
                exclude_inputs: true
            });
        });

    });
</script>
</body>
</html>
